<template>
  <div class="sxjlal">
    <a-search :change="paginationElement?.change" :list="list" v-model="form"></a-search>
    <a-card resize>
      <a-card>
        <el-button @click="handleInfo(null, true)">新增</el-button>
      </a-card>
      <a-table :data="data" :head="head">
        <template #status="{ row }">
          <el-tag type="success" v-if="row.status === STATUS.YQR">{{ row.status }}</el-tag>
          <el-tag type="danger" v-if="row.status === STATUS.WQR">{{ row.status }}</el-tag>
        </template>
        <template #handle="{ row }">
          <a-link v-if="row.status !== STATUS.YQR" type="info" :confirm="() => handleChangeState(row)">处理</a-link>
          <el-link type="primary" @click="handleInfo(row, false)">查看</el-link>
          <a-link type="danger" :confirm="() => handleDelete(row)">删除</a-link>
        </template>
      </a-table>
      <a-pagination ref="paginationElement" :total="total" :change="getTableData"></a-pagination>
      <a-dialog :title="title" v-model="show" :footer="edit" :confirm="handleConfirm">
        <a-form ref="formElement" :list="rowList" v-model="rowForm" :inline="true" :disabled="!edit">
          <template #attachmentUrlName>
            <span>{{ rowForm.attachmentUrlName }}</span>
          </template>
        </a-form>
      </a-dialog>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { tableData, add, save, deleteData } from '../../api/sxjlss/sxjlal'
import { ElMessage } from 'element-plus'
import { upload } from '../../api/common'

enum STATUS {
  WQR = '未确认',
  YQR = '已确认'
}

interface SXJLAL {
  id: string
  status: STATUS
  attachmentUrlName: string
  attachmentUrlList: UploadFilesCTM[]
  [key: string]: unknown
}

const paginationElement = ref<APaginationInstance | null>()
const formElement = ref<AFormInstance | null>(null)

const form = ref({})
const list = ref<FormItem[]>([
  { prop: 'caseName', 'aria-label': '案例名称', type: 'input' },
  { prop: 'caseContent', 'aria-label': '案例内容', type: 'input' }
])

const data = ref<SXJLAL[]>([])
const head = ref([
  { prop: 'caseName', label: '案例名称' },
  { prop: 'caseContent', label: '案例内容' },
  { prop: 'responseDepartment', label: '响应部门' },
  { prop: 'relatedDepartment', label: '关联行业' },
  { prop: 'validTime', label: '有效时间' },
  { prop: 'status', label: '状态' },
  { prop: 'handle', label: '操作', fixed: 'right' }
])
const total = ref(0)

function getTableData(row: number, size: number) {
  tableData<SXJLAL>({
    size,
    row,
    type: '守信激励',
    ...form.value
  }).then(({ data: result }) => {
    data.value = result.pageList.map((item) => {
      return {
        ...item
      }
    })
    total.value = result.totals
  })
}

const show = ref(false)
const title = ref('')
const edit = ref(false)

const rowForm = ref<SXJLAL>({} as SXJLAL)
const rowList = ref<FormItem[]>([
  { prop: 'caseName', 'aria-label': '案例名称', type: 'input', rules: [{ required: true, message: '请输入案例名称', trigger: 'blur' }] },
  { prop: 'caseContent', 'aria-label': '案例内容', type: 'input', rules: [{ required: true, message: '请输入案例内容', trigger: 'blur' }] },
  { prop: 'responseDepartment', 'aria-label': '响应部门', type: 'input', rules: [{ required: true, message: '请输入响应部门', trigger: 'blur' }] },
  { prop: 'relatedDepartment', 'aria-label': '关联行业', type: 'input', rules: [{ required: true, message: '请输入关联行业', trigger: 'blur' }] },
  { prop: 'validTime', 'aria-label': '有效时间', type: 'date', rules: [{ required: true, message: '请选择有效时间', trigger: 'change' }] },
  {
    prop: 'attachmentUrlList',
    'aria-label': '附件',
    type: 'upload',
    formItemProps: {
      style: {
        width: '100%'
      }
    },
    'http-request': (data: FormData) => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          upload<UploadFile>(data)
            .then(({ data: result }) => {
              resolve(result)
            })
            .catch(reject)
        }, 1000)
      })
    }
  }
])

function handleInfo(row: SXJLAL | null, e: boolean) {
  rowForm.value = {
    ...row,
    attachmentUrlList: row
      ? row
        ? ([
            {
              name: row.attachmentUrl,
              status: 'success',
              uid: Date.now(),
              response: {
                name: row.attachmentUrl
              }
            }
          ] as UploadFilesCTM[])
        : []
      : []
  } as SXJLAL
  edit.value = e

  show.value = true
  title.value = e ? '编辑' : '查看'
}

function handleConfirm() {
  formElement.value?.element.validate((valid: boolean) => {
    if (valid) {
      add({
        ...rowForm.value,
        attachmentUrl: rowForm.value.attachmentUrlList && rowForm.value.attachmentUrlList[0] ? rowForm.value.attachmentUrlList[0].response?.url : '',
        type: '守信激励',
        status: STATUS.WQR
      }).then(({ msg }) => {
        show.value = false
        paginationElement.value?.change()
        ElMessage.success(msg)
      })
    }
  })
}

function handleDelete(row: SXJLAL) {
  deleteData(row.id).then(({ msg }) => {
    ElMessage.success(msg)
    paginationElement.value?.change()
  })
}

function handleChangeState(row: SXJLAL) {
  save<SXJLAL>({
    ...row,
    status: STATUS.YQR,
    type: '守信激励'
  }).then(({ msg }) => {
    ElMessage.success(msg)
    paginationElement.value?.change()
  })
}
</script>
